<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">
      <!-- 第九章 文本 -->

      <defs>
        <!-- 9.8 文本路径 -->
        <path id="curvepath"
              d="M30 40 C 50 10, 70 10, 120 40 S 150 0, 200 40"
              style="stroke: gray; fill: none;" />
        <path id="round-corner"
              d="M250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110"
              style="stroke: gray; fill: none;" />
        <path id="sharp-corner"
              d="M 30 110 100 110 100 160"
              style="stroke: gray; fill: none;" />
        <path id="discontinuous"
              d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140"
              style="stroke: gray; fill: none;" />
      </defs>
      <g style="font-family: 'Liberation Sans'; font-size: 10pt;">
        <use xlink:href="#curvepath" />
        <text>
          <textPath xlink:href="#curvepath">
            Following a cubic Bézier curve.
          </textPath>
        </text>
        <use xlink:href="#round-corner" />
        <text>
          <textPath xlink:href="#round-corner">
            Going 'round the bend
          </textPath>
        </text>
        <use xlink:href="#sharp-corner" />
        <text>
          <textPath xlink:href="#sharp-corner">
            Making a quick turn
          </textPath>
        </text>
        <use xlink:href="#discontinuous" />
        <text>
          <textPath xlink:href="#discontinuous">
            Text along a broken path
          </textPath>
        </text>
      </g>

      <path id="textPath"
            d="M0 200a200,200 0 0 1 200,200"
            style="fill: none;stroke: red;" />
      <text>
        <!-- startOffset设置文字开头空余距离 -->
        <textPath xlink:href="#textPath"
                  startOffset="3em">
          啊哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
        </textPath>
      </text>

    </svg>


    <!-- 9.9 空白和文本 -->
    <!--
      xml:space
        default:
          来改变 SVG 处理文本中空白字符（空格、制表符、换行符）的方式。如果指定值为 default（默认值），则 SVG 会按如下规则处理空白字符：
          • 删除所有换行符
          • 将所有制表符转换为空格
          • 删除首尾空格
          • 将任意数量的连续空格换为一个空格
        preserve:
          SVG 只会简单地将所有换行符和制表符换为空格（保留首尾空格），然后显示出来。
     -->
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         xml:space="default"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600"
         style="margin-top:600px">
    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
